<template>
  <div class="app-container dashboard-editor-container">
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane v-for="(item, index) in dataList" :lazy="true" :label="item" :name="index + ''" :key="index">
        <div style="text-align:right">
          <el-select v-model="forumValue" clearable filterable placeholder="请选择专场名称" @change="selectChange">
            <el-option v-for="(it,index) in options" :key="index" :label="it.flag2" :value="it.flag2" />
          </el-select>
        </div>
        <!-- <div style="padding:0 30px 30px">
          <el-row type="flex" justify="space-between">
            <el-col v-for="(item, index) in lineChartData.barData" :span="6" :key="index">
              <p>{{ item.name }}到场人数：{{ item.amount || 0 }}人</p>
              <p>{{ item.name }}到场率：{{ item.zdcrate*100 + '%' || 0 }}</p>
            </el-col>
          </el-row>
        </div> -->

        <!-- 图表展示区域 -->
        <el-row style="background:#fff;padding:16px 5px 0 ;margin-bottom:32px;">
          <line-chart v-if="flag" :chart-data="lineChartData" />
        </el-row>
        <!-- 导出区域 -->
        <div class="export-box clearfix">
          <p style="float:left">进场人员统计</p>
          <el-button icon="el-icon-upload2" style="float:right" @click="handleDownload">导出</el-button>
        </div>
        <!-- 表格数据 -->
        <div class="table">
          <el-table :data="tableList" @selection-change="handleSelectionChange" border fit highlight-current-row>
            <el-table-column type="selection" width="50" align="center">
            </el-table-column>
            <el-table-column label="名字" align="center">
              <template slot-scope="scope">
                {{ scope.row.userid }}
              </template>
            </el-table-column>
            <el-table-column label="入场时间" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.create_date || 0 }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 分页数据 -->
        <div class="pagination-container" style="text-align:right;padding:20px 0 20px">
          <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
          </el-pagination>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { byForumList } from "@/api/activity";
import LineChart from "../../components/LineChart";

export default {
  components: { LineChart },
  computed: {
    ...mapGetters(["activityId"])
  },
  watch: {
    activityId: {
      handler(val, oldVal) {
        if (val != oldVal) {
          this.fetchData(val);
        }
      }
    }
  },
  data() {
    return {
      flag: false,
      currentPage: 1,
      total: 0,
      listLoading: false, // 加载loading
      lineChartData: {
        barData: [
          {
            name: "",
            num: 0,
            content: []
          }
        ]
      }, // 图表数据
      multipleSelection: [],
      dataList: [], // table栏数据
      defaultTable: "", // Table栏默认时间
      activeName: "0", // table栏默认激活项
      listQuery: {
        start: 0,
        limit: 10,
        activityId: sessionStorage.getItem("activityId") - 0,
        startDate: null,
        forumName: null
      },
      tableList: [], // 表格数据
      options: [], // select选择数据
      forumValue: "", // select默认激活
      defaultValue: "", // select默认选择
      tableIndex: null
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    handleSelectionChange(e) {
      this.multipleSelection = e;
    },
    async handleClick(tab) {
      // 切换table栏
      this.listQuery.startDate = tab.label;
      await this.fetchData();
    },
    async selectChange(val) {
      //切换select选择
      this.listQuery.forumName = val;
      let date = this.activeName == "0" ? this.defaultTable : this.activeName;
      this.listQuery.startDate = date;
      await this.fetchData();
    },
    //分页
    handleSizeChange(val) {
      this.listQuery.limit = val;
      let date = this.activeName == "0" ? this.defaultTable : this.activeName;
      this.listQuery.startDate = date;
      this.listQuery.forumName = this.forumValue;
      this.fetchData();
    },
    handleCurrentChange(val) {
      this.listQuery.start = this.listQuery.limit * (val - 1);
      let date = this.activeName == "0" ? this.defaultTable : this.activeName;
      this.listQuery.startDate = date;
      this.listQuery.forumName = this.forumValue;
      this.fetchData();
    },
    // 导出文件
    handleDownload() {
      if (!this.multipleSelection.length) {
        this.$message.warning("请先选择需要导出的单元");
        return;
      }
      this.listLoading = true;
      import("@/vendor/Export2Excel").then(excel => {
        const tHeader = ["名字", "入场时间"];
        const filterVal = ["userid", "create_date"];
        const tableList = this.multipleSelection;
        const data = this.formatJson(filterVal, tableList);
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: "进场人员统计"
          // autoWidth: this.autoWidth,
          // bookType: this.bookType
        });
        this.listLoading = false;
        setTimeout(() => {
          this.$message.success("导出数据成功");
        }, 1000);
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]));
    },
    // 查询数据
    async fetchData(val) {
      this.listLoading = true;
      this.listQuery.activityId =
        val - 0 || sessionStorage.getItem("activityId") - 0;
      const params = { ...this.listQuery };
      const { data } = await byForumList(params);
      if (data.success) {
        this.flag = true;
        this.listLoading = false;
        this.dataList = data.result.day;
        if (this.activeName == "0") {
          this.defaultTable = data.result.day[0]; // Table栏默认时间
        }
        this.tableList = data.result.formGustList;
        this.total = data.result.formGustNum;
        let formlist = [];
        let aaa = this.lineChartData.barData;
        formlist.push(data.result.formlist);
        this.lineChartData.barData = formlist;
        this.options = data.result.forumName;
        this.defaultValue = data.result.forumName[0]; // Table栏默认时间
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.export-box {
  padding: 10px 0;
}
</style>


